<template>
  <div class="setTableBox">
    <div class="setEntrance" @click="open">
      <i class="el-icon-s-tools"></i>
    </div>

    <el-dialog
      title="表格设置"
      :visible.sync="visible"
      center
      :close-on-click-modal="false"
    >
      <div class="chooseBox">
        <div class="chooseBoxTitle">展示内容</div>
        <div class="checkboxGroup">
          <div class="checkAll">
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
          </div>
          <el-checkbox-group
            v-model="checkedColumn"
            @change="handleCheckedChange"
          >
            <el-checkbox
              v-for="column in columnArr"
              :label="column.value"
              :key="column.value"
              >{{ column.label }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div class="submitBtn">
          <el-button
            class="cancelWireless"
            size="medium"
            @click="visible = false"
            >取 消</el-button
          >
          <el-button
            size="medium"
            type="primary"
            :loading="submitLoad"
            @click="SaveColumn"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { SetGridColumnInfos } from '../api'
export default {
  name: 'customTableHead',
  props: {
    tableName: {
      // 表名
      type: String,
      default: ''
    },
    columnArr: {
      // 表格数据
      type: Array,
      default: () => []
    },
    isStoreValue: {
      //是否提交只存储value,label字段
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: false,
      submitLoad: false,
      isIndeterminate: false,
      checkAll: true,
      checkedColumn: []
    }
  },
  methods: {
    open () {
      this.visible = !this.visible
      if (this.visible) {
        let columnArr = JSON.parse(localStorage.getItem('columnArr') || '[]')
        let index = columnArr.findIndex(val => val.GridName == this.tableName)
        if (index >= 0) {
          this.checkedColumn = columnArr[index].ColumnInfos.map(
            key => key.value
          )
          this.checkAll = this.checkedColumn.length == this.columnArr.length
          this.isIndeterminate =
            this.checkedColumn.length > 0 &&
            this.checkedColumn.length < this.columnArr.length
        } else {
          this.checkedColumn = this.columnArr.map(key => key.value)
        }
      }
    },
    handleCheckAllChange (val) {
      let keys = this.columnArr.map(key => key.value)
      this.checkedColumn = val ? keys : []
      this.isIndeterminate = false
    },
    handleCheckedChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.columnArr.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.columnArr.length
    },
    SaveColumn () {
      let arr = []
      for (let i = 0; i < this.checkedColumn.length; i++) {
        const element = this.checkedColumn[i]
        const index = this.columnArr.findIndex(val => val.value == element)
        if (index >= 0) arr.push(this.columnArr[index])
      }
      let request = {
        GridName: this.tableName,
        ColumnInfos: arr
      }
      this.submitLoad = true
      // SetGridColumnInfos({ request })
      // .then(res => {
      let columnArr = JSON.parse(localStorage.getItem('columnArr') || '[]')
      let index = columnArr.findIndex(val => val.GridName == this.tableName)
      if (index >= 0) {
        columnArr[index].ColumnInfos = arr
      } else {
        columnArr.push({ ColumnInfos: arr, GridName: this.tableName })
      }
      localStorage.setItem('columnArr', JSON.stringify(columnArr))
      this.$message.success('设置成功！')
      this.visible = false
      this.$emit('updateColumn')
      // })
      // .finally(() => {
      this.submitLoad = false
      // })
    }
  }
}
</script>
<style scoped lang="less">
@keyframes Rotating {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.setTableBox {
  :deep(.el-dialog) {
    width: 700px;
  }
  .setEntrance {
    width: 40px;
    height: 40px;
    // background: #154f9d;
    background: linear-gradient(90deg, #2268e8 0%, #86b8ff 100%);
    box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.16);
    border-radius: 10px 0px 0px 10px;
    font-size: 20px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    cursor: pointer;
    position: fixed;
    right: 0;
    top: 256px;
    z-index: 9999;
    .el-icon-s-tools {
      animation: Rotating 5s linear infinite;
    }
    &:hover {
      .el-icon-s-tools {
        animation-play-state: paused;
      }
    }
  }
  .chooseBox {
    padding: 16px 24px 0 24px;
    .chooseBoxTitle {
      margin-bottom: 16px;
      color: #cccccc;
    }
    .checkboxGroup {
      .el-checkbox {
        margin-bottom: 14px;
        margin-right: 28px;
      }
      .checkAll {
        float: left;
      }
    }
    .submitBtn {
      width: 272px;
      margin: 0 auto;
      padding: 4px 0 32px 0;
      display: flex;
      justify-content: space-between;
      :deep(.el-button) {
        width: 120px;
      }
    }
  }
}
</style>
